<template>
  <div
    class="item-box"
    ref="item_box"
    :style="[{ backgroundImage: `url(${backgroundImage})` }, styles]"
  >
    <div class="top flex_between">
      <span>
        {{ title }}
      </span>
      <div class="select-box">
        <slot name="select"></slot>
      </div>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
import setRem from "@/utils/px2remref";
export default {
  components: {},
  name: "Index",
  props: {
    title: {
      type: String,
      default: "",
    },
    backgroundImage: {
      type: String,
      default: require("@/assets/images/index/dk_1@2x.png"),
    },
    width: {
      type: [String, Number],
      default: "900",
    },
    height: {
      type: [String, Number],
      default: "450",
    },
    styles: {
      type: Object,
      default: function () {
        return { margin: "0 20px 20px 0", float: "left" };
      },
    },
  },

  created() {},
  mounted() {
    this.initStyle();
  },
  methods: {
    initStyle() {
    //   this.$nextTick(() => {
    //     this.$refs.item_box.style.width =
    //       (Number(this.width) * setRem()) / 16 + "px";
    //     this.$refs.item_box.style.height =
    //       (Number(this.height) * setRem()) / 16 + "px";
    //   });
    },
  },
};
</script>
<style lang="scss" scoped>
.item-box {
  width: 910px;
  height: 450px;
  background-size: 100% 100%;
  padding: 0 16px 16px 16px;
  .top {
    width: 100%;
    height: 52px;
    padding: 0 16px 0 18px;

    span {
      font-size: 25px;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      text-align: left;
      color: #ffffff;
      letter-spacing: 1.12px;
      margin-top: 1.5px;
    }

    .select-box {
      width: auto;
      display: flex;
      align-items: center;
      height: 100%;
      margin-top: 1px;
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 50px);
    padding-top: 14px;
    /* background-color: red; */
  }
}
</style>